<template>
  <div class="page-con">
    <div class="header">
      <div class="square-con">
        <div class="content">
          <p class="title">总流量:</p>
          <div class="num">
            <p class="number">126,560</p>
            <p class="unit">GB</p>
          </div>
          <div class="line"></div>
          <div class="msg">
            <p class="msg-title">日均流量：</p>
            <div class="msg-right">
              <img src="@/assets/home-num.png" alt="" class="photo" />
              <p class="msg-num">23GB</p>
            </div>
          </div>
        </div>
      </div>
      <div class="square-con">
        <div class="content">
          <p class="title">总用户量:</p>
          <div class="num">
            <p class="number">126,560</p>
            <p class="unit">人</p>
          </div>
          <div class="line"></div>
          <div class="msg">
            <p class="msg-title">日均用户量：</p>
            <div class="msg-right">
              <img src="@/assets/home-num.png" alt="" class="photo" />
              <p class="msg-num">3758人</p>
            </div>
          </div>
        </div>
      </div>
      <div class="square-con">
        <div class="content">
          <p class="title">总开播量:</p>
          <div class="num">
            <p class="number">126,560</p>
            <p class="unit">个</p>
          </div>
          <div class="line"></div>
          <div class="msg">
            <p class="msg-title">日均开播量：</p>
            <div class="msg-right">
              <img src="@/assets/home-num.png" alt="" class="photo" />
              <p class="msg-num">23GB</p>
            </div>
          </div>
        </div>
      </div>
      <div class="square-con">
        <div class="content">
          <p class="title">总访问量人数:</p>
          <div class="num">
            <p class="number">126,560</p>
            <p class="unit">人</p>
          </div>
          <div class="line"></div>
          <div class="msg">
            <p class="msg-title">日均访问人数：</p>
            <div class="msg-right">
              <img src="@/assets/home-num.png" alt="" class="photo" />
              <p class="msg-num">3758人</p>
            </div>
          </div>
        </div>
      </div>
      <div class="square-con">
        <div class="content">
          <p class="title">人均停留时长/日:</p>
          <div class="num">
            <p class="number">15</p>
            <p class="unit">min</p>
          </div>
          <div class="line"></div>
          <div class="msg">
            <p class="msg-title">日环比：</p>
            <div class="msg-right">
              <img src="@/assets/home-num.png" alt="" class="photo" />
              <p class="msg-num">8%</p>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="center">
      <div class="line-header">
        <div class="line-title">
          用户访问量
        </div>
        <div class="line-btn">
          <div class="square" v-for="(btn, index) in buttons" :key="index" :class="{ active: activeButton === index }"
            @click="() => { activeButton = index; changeChartType(btn.type) }">
            <div class="circle"></div>
            <p>{{ btn.content }}</p>
          </div>
        </div>
      </div>
      <!--折线图组件-->
      <UserLineChart :options="chartOptions" />
    </div>
    <div class="footer">
      <div class="line-header">
        <div class="line-title">
          流量趋势
        </div>
        <div class="line-btn">
          <div class="square" @click="(changeFlowChartType('month'))">
            <div class="circle"></div>
            <p>月</p>
          </div>
        </div>
      </div>
      <!--折线图组件-->
      <FlowLineChart :options="flowchartOptions" />
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue';
import * as echarts from 'echarts';
import UserLineChart from '../components/UserLineChart.vue';
import FlowLineChart from '../components/FlowLineChart.vue';
import { teodata } from "@/api/Dashboard";


const buttons = [
  { content: '日', type: 'day' },
  { content: '周', type: 'week' },
  { content: '月', type: 'month' }
];
const activeButton = ref(0);

const chartOptions = ref({});
const flowchartOptions = ref({});
const flowRaw = ref([]);
const changeChartType = (type) => {
  let xAxisData;
  let seriesData;

  if (type === 'day') {
    xAxisData = ['07-29', '07-30', '08-01', '08-02', '08-03', '08-04', '08-05'];
    seriesData = [10, 20, 30, 40, 50, 60, 70];
  } else if (type === 'week') {
    xAxisData = ['第1周', '第2周', '第3周', '第4周'];
    seriesData = [100, 200, 300, 400];
  } else if (type === 'month') {
    xAxisData = ['1月', '2月', '3月', '4月', '5月', '6月'];
    seriesData = [1000, 2000, 3000, 4000, 5000, 6000];
  }

  chartOptions.value = {
    title: {
      text: `${type === 'day' ? '日' : type === 'week' ? '周' : '月'}数据`
    },
    tooltip: {},
    xAxis: {
      data: xAxisData
    },
    yAxis: {},
    series: [
      {
        name: '数据',
        type: 'line',
        smooth: true, // 设置为平滑曲线
        // smooth: 0.3,
        symbolSize: 5,
        sampling: 'average',
        itemStyle: {
          color: '#95A4FC'
        },
        stack: 'a',
        areaStyle: {
          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
            {
              offset: 0,
              color: 'rgba(58,77,233,0.8)'
            },
            {
              offset: 1,
              color: 'rgba(200,205,235,0.1)'
            }
          ])
        },
        data: seriesData
      }
    ]
  };
};

const updateFlowChart = () => {
  const xAxisData = flowRaw.value.map(item => item.timeRange); // ["2025-08-09","2025-08-10"]
  const seriesData = flowRaw.value.map(item => item.totalUsage);

  flowchartOptions.value = {
    title: { text: '月数据' },
    tooltip: { trigger: 'axis' },
    xAxis: { type: 'category', data: xAxisData },
    yAxis: { type: 'value' },
    series: [
      {
        name: '加速流量',
        type: 'line',
        smooth: true,
        symbolSize: 5,
        itemStyle: { color: '#95A4FC' },
        areaStyle: {
          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
            { offset: 0, color: 'rgba(58,77,233,0.8)' },
            { offset: 1, color: 'rgba(200,205,235,0.1)' }
          ])
        },
        data: seriesData
      }
    ]
  };
};
const changeFlowChartType = (type) => {
  let xAxisData;
  let seriesData;

  if (type === 'month') {

    seriesData = [1000, 2000, 3000, 4000, 5000, 6000];
  }

  flowchartOptions.value = {
    title: {
      text: '月数据'
    },
    tooltip: {},
    xAxis: {
      data: xAxisData
    },
    yAxis: {},
    series: [
      {
        name: '数据',
        type: 'line',
        smooth: true, // 设置为平滑曲线
        // smooth: 0.3,
        symbolSize: 5,
        sampling: 'average',
        itemStyle: {
          color: '#95A4FC'
        },
        stack: 'a',
        areaStyle: {
          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
            {
              offset: 0,
              color: 'rgba(58,77,233,0.8)'
            },
            {
              offset: 1,
              color: 'rgba(200,205,235,0.1)'
            }
          ])
        },
        data: seriesData
      }
    ]
  };
};


function formatToISO8601WithOffset(date) {
  const pad = (n) => n.toString().padStart(2, '0');
  const year = date.getFullYear();
  const month = pad(date.getMonth() + 1);
  const day = pad(date.getDate());
  const hours = pad(date.getHours());
  const minutes = pad(date.getMinutes());
  const seconds = pad(date.getSeconds());

  // 东八区偏移
  const offset = '+08:00';

  return `${year}-${month}-${day}T${hours}:${minutes}:${seconds}${offset}`;
}

const getdata = async () => {
  const startTime = formatToISO8601WithOffset(
    new Date(Date.now() - 6 * 24 * 60 * 60 * 1000) // 取最近 7 天
  );
  const endTime = formatToISO8601WithOffset(new Date());

  const params = {
    zoneId: '*',
    startTime,
    endTime,
    token: localStorage.getItem('token')
  };

  try {
    const res = await teodata(params);
    if (res.code === 200 && res.success) {
      // 1) 过滤“加速流量”
      flowRaw.value = res.data.filter(d => d.metricName === '加速流量');
      // 2) 更新折线图
      updateFlowChart();
    } else {
      console.warn('接口返回异常:', res.msg);
    }
  } catch (err) {
    console.error('请求失败:', err);
  }
};

onMounted(() => {
  changeChartType('day')
  changeFlowChartType('month')
  getdata()
});

</script>

<style scoped lang="scss">
.page-con {
  width: 100%;
  height: 700px;
  background: #f7f7f7;
  overflow: hidden;
  overflow-y: scroll;

  .header {
    background: #f7f7f7;
    // margin: 20px;
    width: 100%;
    height: 186px;
    display: flex;

    .square-con {
      width: 320px;
      height: 186px;
      border-radius: 10px;
      background: #fff;

      .content {
        margin: 20px;

        .title {
          font-size: 18px;
          color: #999999;
        }

        .num {
          display: flex;
          align-items: center;
          height: 51px;
          margin-bottom: 20px;

          .number {
            font-size: 40px;
            color: #2d7af7;
            font-family: PingFang SC, PingFang SC;
            font-weight: 600;
          }

          .unit {
            font-size: 19px;
            color: #999999;
            margin-left: 8px;
          }
        }

        .line {
          height: 1px;
          background: #e8e8e8;
        }

        .msg {
          display: flex;
          align-items: center;
          justify-content: space-between;

          .msg-title {
            font-weight: 400;
            font-size: 14px;
            color: #999999;
          }

          .msg-right {
            display: flex;
            align-items: center;
          }

          .photo {
            width: 24px;
            height: 24px;
          }

          .msg-num {
            font-family: PingFang SC, PingFang SC;
            font-weight: 600;
            font-size: 16px;
            color: rgba(0, 0, 0, 0.85);
          }
        }
      }
    }

    .square-con:not(:last-child) {
      margin-right: 20px;
    }
  }

  .center,
  .footer {
    background: #fff;
    margin-top: 20px;
    width: 100%;
    height: 374px;
    border-radius: 10px;

    .line-header {
      display: flex;
      justify-content: space-between;

      .line-title {
        font-weight: 600;
        font-size: 18px;
        color: #333333;
        margin: 20px;
      }

      .line-btn {
        margin: 20px;
        display: flex;

        .square {
          width: 40px;
          height: 22px;
          background: #FFFFFF;
          border-radius: 5px 5px 5px 5px;
          border: 1px solid #EEEEEE;
          display: flex;
          justify-content: center;
          align-items: center;
          cursor: pointer;
          margin-left: 14px;

          .circle {
            width: 6px;
            height: 6px;
            border-radius: 50%;
            border: 1px solid #999999;
          }

          p {
            font-size: 12px;
            color: #666666;
          }
        }


        .active {
          background: #2D7AF7;

          .circle {
            border: 1px solid #fff;
          }

          p {
            color: #fff;
          }
        }
      }
    }
  }
}
</style>